import React, { forwardRef } from 'react'
import { ReactComponent as ThumbIconHovered } from './ThumbHovered.svg'
import { ReactComponent as copy } from './copy.svg'
import { ReactComponent as copyDark } from './copyDark.svg'
import { ReactComponent as like } from './like.svg'
import { ReactComponent as likeDark } from './likeDark.svg'
import { ReactComponent as unLike } from './unLike.svg'
import { ReactComponent as unLikeDark } from './unLikeDark.svg'

type ThunmbIconType = 'copy' | 'like' | 'unLike' | 'copyDark' | 'likeDark' | 'unLikeDark'

export const ThunmbIcon = forwardRef<
  SVGSVGElement & { type: ThunmbIconType; className: string },
  React.PropsWithChildren<{ type: ThunmbIconType; className: string }>
>((props, ref) => {
  const comps = {
    copy,
    copyDark,
    like,
    likeDark,
    unLike,
    unLikeDark
  }
  const Comp = comps[props.type]
  return <Comp ref={ref} {...props} className={props.className} />
})

export const ThumbIconHoveredIcon = forwardRef<
  SVGSVGElement & { className: any },
  React.PropsWithChildren<{ className?: string }>
>(({ className, ...props }, ref) => {
  return <ThumbIconHovered ref={ref} {...props} className={className} />
})
